<template>
    <div>
        <!-- 菜单权限基本上只能给超级管理员 -->
        <div style="margin: 5px;text-align: center;">

            <el-button type="success" icon="el-icon-search" @click="loadPost()" circle
                v-if="hasAuth('system:menu-search')" style="margin-left: 5px;"></el-button>
            <el-button type="primary" icon="el-icon-plus" @click="add" circle v-if="hasAuth('system:menu-save')"
                style="margin-left: 5px;"></el-button>
            <el-button type="danger" icon="el-icon-delete" @click="delHandle(null)" v-if="hasAuth('system:menu-delete')"
                circle style="margin-left: 5px;" :disabled="delBtnStatus"></el-button>

        </div>
        <el-table :data="tableData" ref="multipleTable" tooltip-effect="dark" border style="width: 100%" stripe
            @selection-change="handleSelectionChange" row-key="id" default-expand-all
            :tree-props="{ children: 'children', hasChildren: 'hasChildren' }">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column label="菜单名称" width="180" prop="name" align="center"></el-table-column>
            <el-table-column label="权限编码" width="100" prop="code" align="center"></el-table-column>
            <el-table-column label="图标" width="100" prop="icon" align="center">
                <template slot-scope="scope">
                    <el-button :class="scope.row.icon" circle type="primary" v-if="scope.row.icon"></el-button>
                </template>
            </el-table-column>
            <el-table-column label="菜单类型" width="100" prop="type" align="center">
                <template slot-scope="scope">
                    <el-tag v-if="scope.row.type == 0" type="primary">目录</el-tag>
                    <el-tag v-if="scope.row.type == 1" type="success">菜单</el-tag>
                    <el-tag v-if="scope.row.type == 2" type="info">按钮</el-tag>
                </template>
            </el-table-column>
            <el-table-column label="菜单路径" width="180" prop="path" align="center"></el-table-column>
            <el-table-column label="菜单组件" width="180" prop="component" align="center"></el-table-column>
            <el-table-column label="菜单排序" width="100" prop="orderNum" align="center"></el-table-column>
            <el-table-column label="菜单状态" width="200" prop="status" align="center">
                <template slot-scope="scope">
                    <el-switch :value="scope.row.status == 1" active-text="正常" active-color="#13ce66"
                        inactive-color="#ff4949" :disabled="!hasAuth('system:menu-modStatus')" inactive-text="禁用"
                        @change="modStatus(scope.row.id)"></el-switch>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200" align="center" fixed="right">
                <template slot-scope="scope">
                    <el-button type="success" icon="el-icon-edit" v-if="hasAuth('system:menu-update')"
                        @click="mod(scope.row)" circle style="margin-left: 5px;"></el-button>
                    <el-button type="danger" icon="el-icon-delete" v-if="hasAuth('system:menu-delete')"
                        @click="delHandle(scope.row.id)" circle style="margin-left: 5px;"></el-button>
                </template>
            </el-table-column>
        </el-table>

        <el-dialog title="菜单表单" :visible.sync="dialogVisible" width="600px" center>
            <el-form ref="form" :model="form" :rules="rules" label-width="100px">
                <el-form-item label="上级菜单" prop="parentId">
                    <el-select v-model="form.parentId" placeholder="请选择上级菜单">
                        <el-option key="0" label="父级菜单" :value="0"></el-option>
                        <template v-for="item in tableData">
                            <el-option :key="item.id" :value="item.id" :label="item.name"></el-option>
                            <template v-for="child in item.children">
                                <el-option :label="child.name" :value="child.id" :key="child.id">
                                    <span>{{ '-' + child.name }}</span>
                                </el-option>
                            </template>
                        </template>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单名称" prop="name">
                    <el-input v-model="form.name"></el-input>
                </el-form-item>
                <el-form-item label="权限编码" prop="code">
                    <el-input v-model="form.code"></el-input>
                </el-form-item>
                <el-form-item label="菜单图标" prop="icon" v-if="form.type != 2">
                    <el-select clearable v-model="form.icon" placeholder="请选择图标" style="width: 100%;">
                        <el-option v-for="item in iconData" :key="item.name" :label="item.named" :value="item.value">
                            <i :class="item.value">{{ item.name }}</i>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" prop="type">
                    <el-radio-group v-model="form.type">
                        <el-radio label="0">目录</el-radio>
                        <el-radio label="1">菜单</el-radio>
                        <el-radio label="2">按钮</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="菜单路径" prop="path" v-if="form.type == 1">
                    <el-input v-model="form.path"></el-input>
                </el-form-item>
                <el-form-item label="菜单组件" prop="component" v-if="form.type == 1">
                    <el-input v-model="form.component"></el-input>
                </el-form-item>
                <el-form-item label="排序号" prop="orderNum">
                    <el-input-number v-model="form.orderNum" :min="1"></el-input-number>
                </el-form-item>
                <el-form-item label="权限按钮" prop="perm" v-if="form.type == 1">
                    <el-checkbox-group v-model="perm">
                        <el-checkbox v-for="item in permData" :key="item.id" :label="item.name" border></el-checkbox>

                    </el-checkbox-group>
                </el-form-item>

            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" type="danger">取 消</el-button>
                <el-button @click="resetForm" type="success">重置</el-button>

                <el-button @click="save" type="primary">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
    // eslint-disable-next-line vue/multi-word-component-names
    name: 'User',
    data() {
        return {
            user: JSON.parse(localStorage.getItem('CurUser')),
            tableData: [],

            delBtnStatus: true,
            multipleSelection: [],
            iconData: [],
            dialogVisible: false,
            perm: [],
            permData: [
                { name: '新增', id: '1' },
                { name: '修改', id: '2' },
                { name: '删除', id: '3' },
                { name: '查询', id: '4' },
                { name: '控制状态', id: '5' },
                { name: '导入', id: '6' },
                { name: '导出', id: '7' },

            ],
            form: {
                parentId: '',
                name: '',
                code: '',
                type: '0',
                icon: '',
                path: '',
                component: '',
                orderNum: '',
                status: '1',

            },
            rules: {
                name: [
                    { required: true, message: '请输入菜单名称', trigger: 'blur' }
                ],
                code: [
                    { required: true, message: '请输入菜单权限编码', trigger: 'blur' }
                ],
                type: [
                    { required: true, message: '请选择菜单类型', trigger: 'blur' }
                ],
                icon: [
                    { required: true, message: '请输入菜单图标', trigger: 'blur' }
                ],
                path: [
                    { required: true, message: '请输入菜单路径', trigger: 'blur' }
                ],
                component: [
                    { required: true, message: '请输入菜单组件', trigger: 'blur' }
                ],
                parentId: [
                    { required: true, message: '请选择上级菜单', trigger: 'blur' }
                ],
                orderNum: [
                    { required: true, message: '请输入排序号', trigger: 'blur' }
                ],

            }

        }
    },
    methods: {
        getMenuTree() {
            this.$axios.get('/menu/tree').then(res => {
               
                console.log(res)
                this.tableData = res.data
            })
        },
        loadIcon() {
            this.$axios.post('/dict/listPage',
                {
                    pageSize: 1000,
                    pageNum: 1,
                    param: {
                        type: 'icon'
                    }
                }).then(res => {
                    console.log(res)
                   
                    if (res.code == 200) {
                        this.iconData = res.data

                    }
                })
        },
        handleSelectionChange(val) {
            this.multipleSelection = val
            this.delBtnStatus = val.length == 0
        },
        delHandle(id) {
            var ids = []
            if (id) {
                //单删
                ids.push(id)
            } else {
                //批量删
                this.multipleSelection.forEach(item => {
                    ids.push(item.id)
                })
            }
            this.$confirm('此操作将永久删除数据, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$axios.post('/menu/deleteBatch', ids, {
                    headers: {
                        'Content-Type': 'application/json'
                    }
                }).then(res => {
                   
                    if (res.code == 200) {
                        this.$message({
                            message: '删除成功',
                            type: 'success'
                        })
                        this.getMenuTree()
                    } else {
                        this.$message({
                            message: '删除失败',
                            type: 'error'
                        })
                    }
                })
            }).catch(() => {
                this.$message({
                    message: '已取消',
                    type: 'info'
                })
            })
        },
        modStatus(id) {
            this.$axios.post('/menu/modStatus/' + id).then(res => {
               
                if (res.code == 200) {
                    this.$message.success({
                        message: '操作成功',
                        type: 'success',
                        onClose: () => {
                            this.getMenuTree()
                        }
                    }
                    )
                } else {
                    this.$message({
                        message: '操作失败',
                        type: 'error'
                    })


                }
            })
        }, add() {
            this.resetForm()
            this.dialogVisible = true

        },
        mod(row) {
            this.$axios.get('/menu/info/' + row.id).then(res => {
                this.form = res.data
                this.form.type = this.form.type + ''

                this.dialogVisible = true
            })

        },
        save() {
            this.$refs.form.validate(valid => {
                if (valid) {
                    if (this.form.id) {
                        this.doMod()
                    } else {
                        this.doSave()
                    }
                } else {
                    this.$message({
                        message: '校验失败',
                        type: 'warning'
                    })
                }
            })
        },
        doMod() {
            this.$axios.post('/menu/update', this.form).then(res => {
               
                if (res.code == 200) {
                    console.log(this.perm)
                    if (this.perm.length > 0) {
                        this.doHandleSave(this.form.id)
                    } else {
                        this.$message.success({
                            message: '新增成功',
                            type: 'success',

                        })
                        this.dialogVisible = false
                        this.getMenuTree()
                        this.resetForm()
                    }
                } else {
                    this.$message({
                        message: '修改失败',
                        type: 'error'
                    })
                }
            })

        },
        doSave() {
            this.$axios.post('/menu/save', this.form).then(res => {
               
                if (res.code == 200) {
                    const id = res.data.id
                    console.log(id)
                    console.log(this.perm)
                    if (this.perm.length > 0) {
                        this.doHandleSave(id)
                    } else {
                        this.$message.success({
                            message: '新增成功',
                            type: 'success',

                        })
                        this.dialogVisible = false
                        this.getMenuTree()
                        this.resetForm()
                    }

                } else {
                    this.$message({
                        message: '新增失败',
                        type: 'error'
                    })
                }
            })
        },
        doHandleSave(id) {
            this.$axios.post('/menu/saveBatch/' + this.perm + '/' + id).then(res => {
               
                if (res.code == 200) {
                    this.$message.success({
                        message: '新增成功',
                        type: 'success',
                        onClose: () => {
                            this.getMenuTree()
                            this.dialogVisible = false
                            this.resetForm()
                        }
                    })
                }
            })
        },
        resetForm() {
            this.form = {
                parentId: '',
                name: '',
                code: '',
                type: '0',
                icon: '',
                path: '',
                component: '',
                orderNum: '',
                status: '1',

            }
            this.perm = []
        },

    }, mounted() {
        this.loadIcon()
        this.getMenuTree()
    },
    computed: {
        ...mapGetters([
            'hasAuth'
        ])
    },
}
</script>